<template>
  <div class="log-management-container">
    <!-- 筛选条件 -->
    <div class="filter-section">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="操作模块">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入操作模块"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="操作起始时间">
          <el-date-picker
            v-model="searchForm.beginTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="操作结束时间">
          <el-date-picker
            v-model="searchForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="操作人员">
          <el-select
            v-model="searchForm.operUserId"
            placeholder="请选择操作人员"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="admin in adminList"
              :key="admin.id"
              :label="admin.username"
              :value="admin.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择操作状态"
            clearable
            style="width: 150px"
          >
            <el-option label="正常" :value="0" />
            <el-option label="异常" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 日志表格 -->
    <div class="table-section">
      <el-table
        :data="logData"
        style="width: 100%;"
        :max-height="750"
        border
        stripe
        v-loading="loading"
        empty-text="暂无数据"
        highlight-current-row
        fit
      >
        <el-table-column fixed  prop="operId" align="center" label="ID" width="70" />
        <el-table-column fixed  prop="title" align="center" label="模块标题" width="120" />
        <el-table-column prop="businessType" align="center" label="业务类型" width="100">
          <template #default="scope">
            {{ formatBusinessType(scope.row.businessType) }}
          </template>
        </el-table-column>
        <el-table-column prop="method" label="方法名称" width="200" />
        <el-table-column prop="requestMethod" align="center" label="请求方式" width="90" />
        <el-table-column prop="operName" label="操作人员" width="120" />
        <el-table-column prop="operUrl" label="请求URL" width="180" show-overflow-tooltip />
        <el-table-column prop="operIp" label="操作IP" width="120" />
        <el-table-column prop="operParam" label="请求参数" width="200" show-overflow-tooltip />
        <el-table-column prop="jsonResult" label="返回参数" width="200" show-overflow-tooltip />
        <el-table-column prop="status" label="操作状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">
              {{ scope.row.status === 0 ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operTime" label="操作时间" width="180" />
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { adminAPI } from '../api/modules/admin';
import { systemAPI } from '../api/modules/system';

// 搜索表单
const searchForm = reactive({
  beginTime: '',
  endTime: '',
  operUserId: '',
  status: '',
  title: ''
});

// 表格数据
const logData = ref([]);

// 管理员列表
const adminList = ref([]);

// 加载状态
const loading = ref(false);

// 获取管理员列表
const loadAdminList = async () => {
  try {
    const res = await adminAPI.getAllAdminList();
    if (res && res.data) {
      adminList.value = res.data;
    }
  } catch (error) {
    console.error('获取管理员列表失败:', error);
  }
};

// 页面加载时获取管理员列表和日志数据
onMounted(() => {
  loadAdminList();
  handleSearch();
});

// 分页参数
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 业务类型映射（可以根据实际需求扩展）
const businessTypeMap = {
  0: '其他',
  1: '新增',
  2: '修改',
  3: '删除',
  4: '查询',
  5: '登录'
};

// 格式化业务类型
const formatBusinessType = (type) => {
  return businessTypeMap[type] || '未知';
};

// 处理查询
const handleSearch = async () => {
  loading.value = true;
  try {
    const params = {
      ...searchForm,
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize
    };
    const res = await systemAPI.getOperLogList(params);
    if (res && res.rows) {
      logData.value = res.rows || [];
      pagination.total = res.total || 0;
    }
  } catch (error) {
    console.error('获取日志数据失败:', error);
    logData.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};

// 处理重置
const handleReset = () => {
  searchForm.beginTime = '';
  searchForm.endTime = '';
  searchForm.operUserId = '';
  searchForm.status = '';
  searchForm.title = '';
  pagination.currentPage = 1;
};

// 处理分页大小变化
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  handleSearch();
};

// 处理当前页变化
const handleCurrentChange = (current) => {
  pagination.currentPage = current;
  handleSearch();
};
</script>

<style scoped>
.log-management-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filter-section {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.table-section {
  flex: 1;
  overflow: auto;
  margin-bottom: 20px;
  width: 100%;
}

/* 确保表格在水平方向溢出时也能显示滚动条 */
.table-section >>> .el-table__body-wrapper {
  overflow-x: auto;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}

.el-form-item{
  margin-bottom: 0;
}
</style>